<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header">
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
        }
        #container{
            width:100%;
            height:90%;
        }
        *{
            margin:0px;
            padding:0px;
        }
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        p{
            width:603px;
            padding-top:3px;
            overflow:hidden;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="tabs-container">
        <div class="tab-content">
            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <!--困人警告-->
                    <h4 class="title-ele overhaul-tit">困人警告</h4>
                    <div class="row overhaul">
                        <dl class="col-md-5 col-sm-12 dl-horizontal">
                            <dt>困人类型：</dt>
                            <dd th:text="${historyTiringInfo.tiringType}"></dd>
                        </dl>
                        <dl class="col-md-7 col-sm-12  dl-horizontal">
                            <dt>困人单号：</dt>
                            <dd th:text="${historyTiringInfo.tiringCode}"></dd>
                        </dl>
                        <dl class="col-md-5 col-sm-12  dl-horizontal">
                            <dt>电梯名称：</dt>
                            <dd th:text="${historyTiringInfo.elevatorName}"></dd>
                        </dl>
                        <dl class="col-md-7 col-sm-12  dl-horizontal">
                            <dt>困人楼层：</dt>
                            <dd th:text="${historyTiringInfo.tiringFloor}"></dd>
                        </dl>
                        <dl class="col-md-5 col-sm-12  dl-horizontal">
                            <dt>上报人：</dt>
                            <dd th:text="${historyTiringInfo.reportMan}"></dd>
                        </dl>
                        <dl class="col-md-7 col-sm-12  dl-horizontal">
                            <dt>上报时间：</dt>
                            <dd th:text="${historyTiringInfo.reportTime}"></dd>
                        </dl>
                        <dl class="col-md-5 col-sm-12  dl-horizontal">
                            <dt>困人状态：</dt>
                            <dd th:text="${historyTiringInfo.tiringState}"></dd>
                        </dl>
                        <dl class="col-md-7 col-sm-12  dl-horizontal">
                            <dt>困人时长：</dt>
                            <dd th:text="${historyTiringInfo.tiringDuration}"></dd>
                        </dl>
                        <dl class="col-md-12 col-sm-12  dl-horizontal">
                            <dt>原因：</dt>
                            <dd th:text="${historyTiringInfo.tiringCause}"></dd>
                        </dl>
                        <dl class="col-md-12 col-sm-12  dl-horizontal">
                            <dt>备注：</dt>
                            <dd th:text="${historyTiringInfo.remark}"></dd>
                        </dl>
                    </div>
                    <!--历史记录-->
                    <div class="row animated fadeInRight">
                        <div class="ibox float-e-margins">
                            <div id="ibox-content">
                                <div id="vertical-timeline" class="vertical-container-history light-timeline">
                                    <div class="vertical-timeline-block">
                                        <div class="vertical-timeline-icon red-bg pass">
                                            <i class="fa fa-medkit"></i>
                                        </div>

                                        <div class="vertical-timeline-content">
                                            <h2>上报困人</h2>
                                            <p>上一年的销售业绩发布会。总结产品营销和销售趋势及销售的现状。</p>
                                        </div>
                                    </div>

                                    <div class="vertical-timeline-block">
                                        <div class="vertical-timeline-icon yellow-bg pass">
                                            <i class="fa fa-ambulance"></i>
                                        </div>

                                        <div class="vertical-timeline-content">
                                            <h2>启动救援</h2>
                                            <p>发送上年度《销售业绩报告》</p>
                                        </div>
                                    </div>

                                    <div class="vertical-timeline-block">
                                        <div class="vertical-timeline-icon navy-bg pass">
                                            <i class="fa fa-user-md"></i>
                                        </div>

                                        <div class="vertical-timeline-content">
                                            <h2>接受任务</h2>
                                            <p>喝咖啡啦，啦啦啦~~</p>
                                        </div>
                                    </div>

                                    <div class="vertical-timeline-block">
                                        <div class="vertical-timeline-icon red-bg pass">
                                            <i class="fa fa-history"></i>
                                        </div>

                                        <div class="vertical-timeline-content">
                                            <h2>到达现场</h2>
                                            <p>喝咖啡啦，啦啦啦~~</p>
                                        </div>
                                    </div>

                                    <div class="vertical-timeline-block">
                                        <div class="vertical-timeline-icon navy-bg pass">
                                            <i class="fa fa-check"></i>
                                        </div>

                                        <div class="vertical-timeline-content">
                                            <h2>完成救援</h2>
                                            <p>给李四打电话分配本月工作任务</p>
                                        </div>
                                    </div>

                                    <div class="vertical-timeline-block">
                                        <div class="vertical-timeline-icon blue-bg pass">
                                            <i class="fa fa-check"></i>
                                        </div>

                                        <div class="vertical-timeline-content">
                                            <h2>确认完成</h2>
                                            <p>发年终奖啦，啦啦啦~~</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--地图展示-->
                    <div id="container" style="height:450px;width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        $(function() {
            $('#ibox-content').addClass('ibox-content');
            $('#vertical-timeline').removeClass('light-timeline');
            $('#vertical-timeline').addClass('dark-timeline');
        });

        //腾讯地图
        function init() {
            //设置地图中心点
            var myLatlng = new qq.maps.LatLng(34.259430,108.947040);
            //定义工厂模式函数
            var myOptions = {
                zoom: 15,               //设置地图缩放级别
                center: myLatlng,      //设置中心点样式
                mapTypeId: qq.maps.MapTypeId.ROADMAP  //设置地图样式详情参见MapType
            };
            //获取dom元素添加地图信息
            var map = new qq.maps.Map(document.getElementById("container"), myOptions);
            var markPoint;
            //添加定时器(初始化地图标记点)
            setTimeout(function(){
                markPoint=new qq.maps.Marker({
                    position:myLatlng,
                    animation:qq.maps.MarkerAnimation.BOUNCE,
                    map:map
                });
            },2000);
            //添加监听事件(鼠标点击切换标记点)
            qq.maps.event.addListener(map, 'click', function(evt) {
                if(!markPoint) {
                    markPoint=new qq.maps.Marker({
                        position:evt.latLng,
                        map:map
                    });
                    return;
                }
                markPoint.setPosition(evt.latLng);
                console.log(evt.latLng.getLat().toFixed(6),evt.latLng.getLng().toFixed(6));
                //将对应的HTML元素设置值
                //$("#longitude").val(evt.latLng.getLat().toFixed(6));
                //$("#latitude").val(evt.latLng.getLng().toFixed(6));
            });
        }
        //异步加载地图库函数文件
        function loadScript() {
            //创建script标签
            var script = document.createElement("script");
            //设置标签的type属性
            script.type = "text/javascript";
            //设置标签的链接地址
            script.src = "https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&callback=init";
            //添加标签到dom
            document.body.appendChild(script);
        }
        window.onload = loadScript;    // dom文档加载结束开始加载 此段代码

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-elevatorInfo-edit').serialize());
            }
        }

    </script>
</body>
</html>